<script setup lang="ts">
import { useDebounceFn } from '@vueuse/core';

interface Props {
  placeholder?: string;
}

interface Emit {
  (e: 'search'): void;
}

const { placeholder = '请输入关键词搜索' } = defineProps<Props>();
defineOptions({
  name: 'InputSearch'
});

const emit = defineEmits<Emit>();

const model = defineModel<string>('value', { required: true });

const search = useDebounceFn(
  () => {
    emit('search');
  },
  250,
  { maxWait: 1000 }
);

const enterEvent = useDebounceFn(
  (event: KeyboardEvent) => {
    if (event.key === 'Enter') {
      search();
    }
  },
  250,
  { maxWait: 1000 }
);
</script>

<template>
  <NInputGroup class="w-full">
    <NInput v-model:value="model" :placeholder="placeholder" clearable @clear="search" @keyup="enterEvent" />
    <NButton type="primary" @click="search">
      <template #icon>
        <icon-local-ic-round-search class="text-icon" />
      </template>
      搜索
    </NButton>
  </NInputGroup>
</template>

<style lang="scss" scoped></style>
